<template>
  <div style="width: 100%">
    <el-container>
      <div class="SecondMenu">
        <p style="color: #fff; margin-left: 30px;">项目</p>
        <el-menu
          :default-active="path"
          class="el-menu-vertical-demo"
          text-color="#fff"
          router
          active-text-color="#ffd04b">
          <el-menu-item index="/user/projects/myMission/directed">
            <i class="el-icon-s-order"></i>
            <span slot="title">我 的 任 务</span>
          </el-menu-item>
          <el-menu-item index="/user/projects/myProjects/allProjects">
            <i class="el-icon-s-unfold"></i>
            <span slot="title">全 部 项 目</span>
          </el-menu-item>
          <el-menu-item index="/user/projects/dataTable/project">
            <i class="el-icon-s-data"></i>
            <span slot="title">统 计 报 表</span>
          </el-menu-item>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-star-on" style="color: #ffd04b"></i>
              <span>星标</span>
            </template>
            <el-menu-item :index=projectPath+item.id v-for="item in topProjects">
              <i class="el-icon-s-custom"></i>
              <span>{{item.name}}</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-document-copy"></i>
              <span>项目</span>
            </template>
            <el-menu-item :index=projectPath+item.id v-for="item in Projects">
              <i class="el-icon-s-custom"></i>
              <span>{{item.name}}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
      <router-view @updatePath="updatePath" @openMission="openMission" @addProject="addProject" @getMessage="getMessage"
      :key = "$route.name + ($route.params.id || '')" ></router-view>
    </el-container>
  </div>
</template>

<script>
  const axios = require('axios');
    export default {
        name: "Projects",
      data(){
          return {
            path:"",
            projectPath: "/user/projects/projectDetail/overview/",
            topProjects:[],
            Projects: [],
          }
      },
      created() {
        this.getMessage();
      },
      methods: {
        updatePath(data) {
          this.path = data;
        },

        getMessage() {
          this.$axios.all([
            axios.post("/getAllProjectList",{"id":window.localStorage.getItem("id"),"enterpriseId": window.localStorage.getItem("enterprise_id")}),
            axios.post("/getAllTopProjectList",{"id":window.localStorage.getItem("id"),"enterpriseId": window.localStorage.getItem("enterprise_id")})
          ]).then(this.$axios.spread((res1, res2) => {
            // console.log(res1);
            // console.log(res2);
            this.Projects = res1.data;
            this.topProjects = res2.data;
          }))
        },

        openMission(id) {
          this.$emit("openMission",id);
        },

        addProject(){
          this.$emit('addProject');
        }
      },

    }
</script>

<style scoped>

</style>
